<template>
	<view style="padding-bottom: 80rpx;">
		<van-skeleton title row="13" :loading="loading">
		<view class="order-content">
			<!-- 主任务信息 -->
			<view style="margin-bottom: 40rpx;">
				<view class="content-item">
					<text class="item-name">检查地址：</text>
					<view class="right-content">{{ params.roomName }}</view>
				</view>
				<view class="content-item">
					<text class="item-name">验房日期：</text>
					<view class="right-content">{{ params.inspectTime | formatTime }}</view>
				</view>
				<view class="content-item">
					<text class="item-name">验房机构：</text>
					<view class="right-content">{{ params.inspectOrg }}</view>
				</view>
				<view class="content-item">
					<text class="item-name">验房人员：</text>
					<view class="right-content">{{ params.inspectWorkerName }}</view>
				</view>
			</view>
			<view style="margin-bottom: 20rpx;">
				<view class="detail-title">
					<text>验房信息</text>
				</view>

			</view>

		</view>
		<view class="install-container" style="padding-left:20rpx; margin-bottom: 30rpx;">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
				这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="水表底数：" name="waterMeter">
					<input type="number" maxlength="50" v-model="params.waterMeter" placeholder="请输入水表底数" @input="binddata('waterMeter',$event.detail.value)">
				</uni-forms-item>
				<!-- <uni-forms-item required label="设施编号：" name="设施编号">
						<input maxlength="50" v-model="params['设施编号']" placeholder="请输入设施编号" @input="binddata('设施编号',$event.detail.value)">
					</uni-forms-item> -->
				<uni-forms-item required label="电表底数：" name="powerMeter">
					<input type="number" maxlength="18" v-model="params.powerMeter" placeholder="请输入电表底数" @input="binddata('powerMeter',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item label="陪验人：" name="inspectCompany">
					<input maxlength="18" v-model="params.inspectCompany" placeholder="请输入陪验人">
				</uni-forms-item>
				<uni-forms-item label="车位号：" name="carPosition">
					<input maxlength="18" v-model="params.carPosition" placeholder="请输入车位号">
				</uni-forms-item>
				<uni-forms-item required label="验房描述：" name="remark">
					<input v-model="params.remark" @input="binddata('remark',$event.detail.value)" placeholder="请输入验房描述">
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
						<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
					</uni-forms-item> -->

				<!-- <button class="grid-btn" @click="submitForm">提交</button> -->
			</uni-forms>
			<view  style="margin-top:20rpx;padding-left: 20rpx;">
				<image-upload  @input="onChange" :max="3" :bMargin="6"></image-upload >
			</view>

		</view>
		<button class="evaluate-btn" @click="handleSubmit">提交</button>
		</van-skeleton>
	</view>


</template>

<script>
	import imageUpload from '@/myComponents/image-uploader.vue'
	export default {
		components: {
			imageUpload
		},
		data() {
			return {
				loading: true,
				params: {
					waterMeter: null,
					powerMeter: null,
					inspectCompany: null,
					carPosition: null,
					inspectTime: null,
					inspectAccessory: '',
					remark: ''
				},
				rules: {
					waterMeter: {
						rules: [{
							required: true,
							errorMessage: '请填写设施类型',
						}]
					},
					powerMeter: {
						rules: [{
							required: true,
							errorMessage: '请填写设施名称',
						}]
					},
					remark: {
						rules: [{
							required: true,
							errorMessage: '请填写验房描述',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.getCheckDetail(+options.id)
		},
		methods: {
			onChange(e) {
				this.params.inspectAccessory = e.join(',')
			},
			getCheckDetail(id) {
				// uni.showLoading()
				this.$http.post('/checkin/inspect/info', {
					id
				}).then(res => {
					if (res.code === 10000) {
						res.data.inspectAccessory = res.data.inspectAccessory.split(',')
						this.params = res.data
						this.loading = false
					}
				})
			},
			handleSubmit() {
				this.$refs.form.submit().then(res => {
					
					// console.log('表单数据信息：', res);
					// console.log('params', this.params)
					this.checkRoom()
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			checkRoom() {
				uni.showLoading()
				this.$http.post('/checkin/inspect/update', this.params).then(res => {
					if(res.code === 10000) {
						uni.redirectTo({
							url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/pages/service/service' + '&title=返回服务页面'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../style/info.scss';

	.order-content {
		margin-bottom: -30rpx;
	}

	.evaluate-btn {
		height: 90rpx;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #1152FC;
		border-radius: 0;
	}
</style>
